import React, { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  HomeOutlined,
  ReadOutlined,
  ProfileOutlined,
  MessageOutlined,
  UserOutlined
} from '@ant-design/icons';
import styles from "./Home.module.css";
import './Tale.css'
import axios from 'axios';

export default function Home() {
  const [currentBannerIndex, setCurrentBannerIndex] = useState(0);
  const [videoLoaded, setVideoLoaded] = useState(false);
  const [currentProductIndex, setCurrentProductIndex] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const menuRef = useRef(null);
  const navigate = useNavigate();

  // 添加当前页面状态
  const [currentPage, setCurrentPage] = useState('home');

  // 在Home组件顶部添加状态
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  // 添加响应式断点
  const isMobile = windowSize.width < 768;
  const isTablet = windowSize.width >= 768 && windowSize.width <= 1024;
  const isDesktop = windowSize.width > 1024;

  // 添加窗口大小变化监听
  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);


  const banners = [
    "智绘师20年感恩季 老学员购学而思学习机最高立减600元 了解详情 ",
    "新学员专享优惠 首次购买学习机立减300元 立即抢购 ",
    "寒假课程火热报名中 早鸟价限时优惠 查看详情 ",
  ];

  const products = [
    {
      id: 1,
      title: "摩比爱数学",
      description: "畅销超400万册的思维启蒙网红图书",
      price: "¥135元起",
      image: "/image/2.webp",
      alt: "摩比爱数学",
    },
    {
      id: 2,
      title: "学而思秘籍",
      description: "思维培养、基础巩固",
      price: "¥41.7元起",
      image: "/image/1.webp",
      alt: "学而思秘籍",
    },
    {
      id: 3,
      title: "摩比启蒙机",
      description: "启蒙新方式一机全搞定",
      price: "¥79元起",
      image: "/image/3.png",
      alt: "摩比启蒙机",
    },
    {
      id: 4,
      title: "学而思基本功",
      description: "扩展延伸、阶段复习",
      price: "¥58.3元起",
      image: "https://img.alicdn.com/i1/421334959/O1CN01cgAtkq1mVGot4F9wK_!!421334959.jpg",
      alt: "学而思基本功"
    },
    {
      id: 5,
      title: "课内培优",
      description: "思维培养、基础巩固",
      price: "¥43元起",
      image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jaN0XcPm-KwxURNlAzoMFAHaHa?w=201&h=201&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      alt: "学而思秘籍"
    },
    {
      id: 6,
      title: "学而思秘籍",
      description: "思维培养、基础巩固",
      price: "¥41.7元起",
      image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.HT3z6I1kMkVvLLEJyXFTFAHaHa?w=190&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      alt: "学而思秘籍"
    },
  ];

  const premiumCourses = [
    {
      id: 1,
      title: "小学数学思维训练",
      description: "培养逻辑思维，提升数学能力",
      price: "¥299/学期",
      image: "https://ts2.tc.mm.bing.net/th?id=OVF.V4jMW%2f8JQDFlATJDmog%2bPg&w=197&h=110&c=7&rs=1&qlt=70&o=7&cb=thws4&dpr=1.5&pid=1.7&rm=3",
      tag: "热销"
    },
    {
      id: 2,
      title: "英语启蒙精品课",
      description: "趣味英语学习，打好语言基础",
      price: "¥399/学期",
      image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.XVm15QRY6odfqTX-gFiGsAHaE8?w=258&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3",
      tag: "新课"
    },
    {
      id: 3,
      title: "编程思维启蒙",
      description: "培养计算思维，掌握未来技能",
      price: "¥499/学期",
      image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.KN3x5XDPsgFFjlYM6a7g3gHaEK?w=274&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      tag: "限时优惠"
    }
  ];

  // 自动轮播
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentBannerIndex((prev) => (prev + 1) % banners.length);
    }, 2000); // 每2秒切换一次

    return () => clearInterval(interval);
  }, [banners.length]);

  const nextBanner = () => {
    setCurrentBannerIndex((prev) => (prev + 1) % banners.length);
  };

  const prevBanner = () => {
    setCurrentBannerIndex(
      (prev) => (prev - 1 + banners.length) % banners.length
    );
  };

  // 修改nextProduct和prevProduct函数
  const nextProduct = () => {
    setCurrentProductIndex((prev) => {
      const nextIndex = prev + 1;
      if (nextIndex >= products.length) {
        return 0; // 回到第一个
      }
      return nextIndex;
    });
  };

  const prevProduct = () => {
    setCurrentProductIndex((prev) => {
      const prevIndex = prev - 1;
      if (prevIndex < 0) {
        return products.length - 1; // 跳到最后一个
      }
      return prevIndex;
    });
  };

  const handleVideoLoad = () => {
    console.log("Video loaded successfully");
    setVideoLoaded(true);
  };

  const handleVideoError = (e) => {
    console.error("Video error:", e);
  };

  const [drawerOpen, setDrawerOpen] = useState(false);

  // 修改toggleMenu函数
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
    setDrawerOpen(!drawerOpen);
  };

  // 点击外部关闭菜单
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsMenuOpen(false);
      }
    };

    if (isMenuOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isMenuOpen]);

  // 跳转到在线课程页面
  const handleCilkeadd = () => {
    navigate("./zhibohome");
  };

  // 跳转学习工具页面
  const handleCilkeAid = () => {
    navigate("./chatAi")
  };

  // 模型
  const handlCilkeJiu = () => {
    navigate("./angil")
  }


  // 实时聊天
  const handleCilkeserver = () => {
    navigate("./chatroom")
  }



  const [activeTab, setActiveTab] = useState('/');
  const tabItems = [
    { icon: <HomeOutlined />, label: "首页", path: "/" },
    { icon: <ProfileOutlined />, label: "课程", path: "/coursess" },
    { icon: <ReadOutlined />, label: "图书", path: "/books" },
    { icon: <MessageOutlined />, label: "聊天", path: "/chatroom" },
    { icon: <UserOutlined />, label: "我的", path: "/d" }
  ];

  // 根据当前路径设置active tab
  useEffect(() => {
    const currentPath = window.location.pathname;
    setActiveTab(currentPath);
  }, []);

  // 修改导航函数，改为切换页面内容而不是跳转
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  // 图书分类
  const categories = [
    { id: 'all', name: '全部图书' },
    { id: 'math', name: '数学思维' },
    { id: 'chinese', name: '语文阅读' },
    { id: 'english', name: '英语学习' },
    { id: 'science', name: '科学探索' },
    { id: 'art', name: '艺术创作' }
  ];

  // 图书数据
  const books = [
    {
      id: 1,
      title: "摩比爱数学",
      description: "畅销超400万册的思维启蒙网红图书，培养孩子的数学思维",
      category: "math",
      author: "学而思教研团队",
      publisher: "学而思出版社",
      price: "¥135",
      originalPrice: "¥168",
      image: "/image/2.webp",
      tag: "热销",
      rating: 4.8,
      sales: "400万+"
    },
    {
      id: 2,
      title: "学而思秘籍",
      description: "思维培养、基础巩固，全面提升学习能力",
      category: "math",
      author: "学而思教研团队",
      publisher: "学而思出版社",
      price: "¥41.7",
      originalPrice: "¥59",
      image: "/image/1.webp",
      tag: "推荐",
      rating: 4.6,
      sales: "200万+"
    },
    {
      id: 3,
      title: "摩比启蒙机",
      description: "启蒙新方式一机全搞定，智能学习好帮手",
      category: "science",
      author: "摩比团队",
      publisher: "摩比出版社",
      price: "¥79",
      originalPrice: "¥99",
      image: "/image/3.png",
      tag: "新品",
      rating: 4.7,
      sales: "50万+"
    },
    {
      id: 4,
      title: "学而思基本功",
      description: "扩展延伸、阶段复习，夯实学习基础",
      category: "chinese",
      author: "学而思教研团队",
      publisher: "学而思出版社",
      price: "¥58.3",
      originalPrice: "¥78",
      image: "https://img.alicdn.com/i1/421334959/O1CN01cgAtkq1mVGot4F9wK_!!421334959.jpg",
      tag: "限时",
      rating: 4.5,
      sales: "150万+"
    },
    {
      id: 5,
      title: "课内培优",
      description: "思维培养、基础巩固，课内课外双提升",
      category: "math",
      author: "学而思教研团队",
      publisher: "学而思出版社",
      price: "¥43",
      originalPrice: "¥58",
      image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jaN0XcPm-KwxURNlAzoMFAHaHa?w=201&h=201&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      rating: 4.4,
      sales: "120万+"
    },
    {
      id: 6,
      title: "英语启蒙绘本",
      description: "趣味英语学习，通过绘本培养语言能力",
      category: "english",
      author: "英语教研团队",
      publisher: "教育出版社",
      price: "¥89",
      originalPrice: "¥128",
      image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.HT3z6I1kMkVvLLEJyXFTFAHaHa?w=190&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7",
      tag: "热销",
      rating: 4.9,
      sales: "80万+"
    }
  ];

  // 图书分类状态
  const [activeCategory, setActiveCategory] = useState('all');

  // 根据分类筛选图书
  const filteredBooks = activeCategory === 'all' 
    ? books 
    : books.filter(book => book.category === activeCategory);

  // 课程相关状态
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [activeCourseCategory, setActiveCourseCategory] = useState('all');

  // 课程分类
  const courseCategories = [
    { id: 'all', name: '全部课程' },
    { id: 'math', name: '数学思维' },
    { id: 'chinese', name: '语文素养' },
    { id: 'english', name: '英语启蒙' },
    { id: 'science', name: '科学探索' },
    { id: 'art', name: '艺术创作' }
  ];

  // 获取课程数据
  useEffect(() => {
    if (currentPage === 'courses') {
      const fetchCourses = async () => {
        try {
          setLoading(true);
          setError(null);

          console.log('开始获取课程数据...');
          const response = await axios.get('http://localhost:3001/api/courses', {
            params: {
              page: 1,
              limit: 50
            },
            timeout: 10000
          });

          console.log('API响应:', response.data);

          if (response.data.success) {
            const transformedCourses = response.data.data.map(course => {
              let imageUrl;
              console.log('处理课程图片:', {
                courseName: course.name,
                originalCoverImageUrl: course.coverImageUrl
              });

              if (course.coverImageUrl) {
                if (course.coverImageUrl.startsWith('/uploads/')) {
                  imageUrl = `http://localhost:3001${course.coverImageUrl}`;
                  console.log('相对路径图片:', imageUrl);
                } else if (course.coverImageUrl.startsWith('http')) {
                  imageUrl = course.coverImageUrl;
                  console.log('完整URL图片:', imageUrl);
                } else {
                  imageUrl = `http://localhost:3001/uploads/course-images/${course.coverImageUrl}`;
                  console.log('其他路径图片:', imageUrl);
                }
              } else {
                imageUrl = '/image/1.webp';
                console.log('使用默认图片:', imageUrl);
              }

              return {
                id: course._id,
                title: course.name,
                description: course.description || '暂无描述',
                category: 'all',
                level: '初级',
                duration: '12课时',
                students: '1.2k',
                price: `¥${(course.price / 100).toFixed(0)}`,
                image: imageUrl,
                tag: course.createdAt > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) ? '新品' : null
              };
            });

            console.log('转换后的课程数据:', transformedCourses);
            setCourses(transformedCourses);
          } else {
            console.error('API返回失败:', response.data);
            setError('获取课程数据失败');
          }
        } catch (error) {
          console.error('获取课程数据错误:', error);

          if (error.code === 'ECONNREFUSED') {
            console.log('后端服务未运行，使用示例数据');
            const fallbackCourses = [
              {
                id: 1,
                title: "数学思维启蒙课程",
                description: "培养孩子的逻辑思维和数学能力，通过趣味游戏激发学习兴趣",
                category: "math",
                level: "初级",
                duration: "12课时",
                students: "2.3k",
                price: "¥299",
                image: "http://localhost:3001/uploads/course-images/course-image-1754309060938-9041.jpg",
                tag: "热门"
              },
              {
                id: 2,
                title: "语文素养提升班",
                description: "全面提升语文素养，包括阅读理解、写作表达等核心能力",
                category: "chinese",
                level: "中级",
                duration: "16课时",
                students: "1.8k",
                price: "¥399",
                image: "http://localhost:3001/uploads/course-images/course-image-1754308984211-3942.png",
                tag: "推荐"
              },
              {
                id: 3,
                title: "英语启蒙课程",
                description: "通过互动式教学，让孩子轻松掌握英语基础知识和口语表达",
                category: "english",
                level: "初级",
                duration: "10课时",
                students: "3.1k",
                price: "¥199",
                image: "http://localhost:3001/uploads/course-images/course-image-1754272731247-3943.png"
              }
            ];
            setCourses(fallbackCourses);
            setError('后端服务未运行，显示示例数据');
          } else if (error.response) {
            setError(`服务器错误: ${error.response.status} - ${error.response.data?.message || '未知错误'}`);
          } else if (error.request) {
            setError('网络连接超时，请检查网络连接');
          } else {
            setError('获取课程数据失败，请稍后重试');
          }
        } finally {
          setLoading(false);
        }
      };

      fetchCourses();
    }
  }, [currentPage]);

  // 根据分类筛选课程
  const filteredCourses = activeCourseCategory === 'all'
    ? courses
    : courses.filter(course => course.category === activeCourseCategory);

  return (
    <div className={styles['home-container']}>
      {/* Header Navigation Bar - 固定定位 */}
      <header className={styles['header']} style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        backgroundColor: 'white',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div className={styles['header-content']}>
          {/* Logo */}
          <div className={styles['logo']}>
            <div className={styles['logo-icon']}>
              <div className={`${styles['logo-square']} ${styles['red']}`}></div>
              <div className={`${styles['logo-square']} ${styles['green']}`}></div>
              <div className={`${styles['logo-square']} ${styles['blue']}`}></div>
              <div className={`${styles['logo-square']} ${styles['yellow']}`}></div>
            </div>
            <span className={styles['logo-text']}>智绘师</span>
          </div>

          {/* Navigation Links */}
          <nav className={styles['nav-links']}>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'home' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('home')}
            >
              首页
            </p>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'xue' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('xue')}
            >
              学习机
            </p>
            <p className={`${styles['nav-link']} ${currentPage === 'wx' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('wx')}
            >
              智绘师网校
            </p>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'courses' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('courses')}
            >
              培优素养课
            </p>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'books' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('books')}
            >
              智能图书
            </p>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'jiu' ? styles['active'] : ''}`}
              onClick={handlCilkeJiu}
            >
              九章大模型
            </p>
            <p 
              className={`${styles['nav-link']} ${currentPage === 'tale' ? styles['active'] : ''}`}
              onClick={() => handlePageChange('tale')}
            >
              我们的故事
            </p>
          </nav>

          {/* Right Side Menu */}
          <div className={styles['menu-toggle']} onClick={toggleMenu} ref={menuRef}>
            <div className={styles['hamburger']}>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <span className={styles['menu-text']}>全部</span>
            {/* 在return语句中添加条件渲染的抽屉菜单 */}
            {drawerOpen && (
              <div className={styles['drawer-overlay']} onClick={toggleMenu}>
                <div
                  className={`${styles['drawer-menu']} ${isMobile ? styles['mobile-drawer'] :
                      isTablet ? styles['tablet-drawer'] :
                        styles['desktop-drawer']
                    }`}
                  onClick={(e) => e.stopPropagation()}
                >
                  <div className={styles['drawer-header']}>
                    <span className={styles['drawer-title']}>智绘师</span>
                    <button className={styles['drawer-close']} onClick={toggleMenu}>×</button>
                  </div>

                  <div className={styles['drawer-content']}>
                    <div className={styles['menu-section']}>
                      <div className={styles['menu-item']}>选课</div>
                      <div className={styles['menu-item']} onClick={handleCilkeAid}>学习俱乐部</div>
                      <div className={styles['menu-item']}>课程表</div>
                      <div className={styles['menu-item']}>智绘师移动应用</div>
                      <div className={styles['menu-item']} onClick={() => handlePageChange('books')}>智能图书</div>
                      <div className={styles['menu-item']} onClick={() => handlePageChange('courses')}>精品课臻选</div>
                      <div className={styles['menu-item']} onClick={handleCilkeadd}>精品课讲堂</div>
                      <div className={styles['menu-item']}>上海智绘课堂</div>
                    </div>

                    <div className={styles['menu-divider']}></div>

                    <div className={styles['menu-section']}>
                      <div className={styles['menu-item']}>关于智绘师</div>
                      <div className={styles['menu-item']} onClick={handleCilkeserver}>帮助中心</div>
                    </div>

                    <div className={styles['drawer-footer']}>
                      <button className={styles['register-btn']}>
                        <span className={styles['btn-text']}>退出登录</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </header>

      {/* 为固定导航栏添加顶部间距 */}
      <div style={{ height: '80px' }}></div>

      {/* Promotional Banner - 只在首页显示 */}
      {currentPage === 'home' && (
      <div className={styles['promo-banner']}>
        <div className={styles['banner-content']}>{banners[currentBannerIndex]}</div>
      </div>
      )}

      {/* 根据当前页面状态显示不同内容 */}
      {currentPage === 'tale' ? (
        // 显示Tale页面内容
        <div className="tale-container">
          {/* 图片区域 */}
          <section className="image-section" style={{ marginTop: '0' }}>
            <div className="image-container">
              <img src="/image/4.webp" alt="智绘师故事" className="main-image" />
            </div>
          </section>

          {/* 我们的故事卡片 */}
          <section className="our-story-section">
            {/* 模糊背景 - 手写字的场景 */}
            <div className="our-story-background"></div>
            
            {/* 白色卡片 */}
            <div className="our-story-card">
              {/* 我们的故事标题 */}
              <h1 className="our-story-title">
                我们的故事
              </h1>
              
              {/* 分隔线 */}
              <div className="our-story-divider"></div>

              {/* 故事卡片容器 */}
              <div className="story-cards-container">
                {/* 第一个故事卡片 */}
                <div className="story-card">
                  {/* 左侧图片 */}
                  <div className="story-card-image">
                    <img 
                      src="/image/5.webp" 
                      alt="科学少年" 
                    />
                  </div>

                  {/* 右侧内容 */}
                  <div className="story-card-content">
                    <h3 className="story-card-title">
                      科学少年成长记: 13岁的小孩儿哥竟然是天文化石小达人
                    </h3>
                    <p className="story-card-description">
                      他用望远镜探索宇宙的奥秘,用小锤子敲开史前的秘密。13岁的他,卧室藏着无尽的科学秘密...
                    </p>
                    <div className="story-card-link">
                      <span>
                        去了解 ›
                      </span>
                    </div>
                  </div>
                </div>

                {/* 第二个故事卡片 */}
                <div className="story-card">
                  {/* 左侧图片 */}
                  <div className="story-card-image">
                    <img 
                      src="/image/4.webp" 
                      alt="科学少年" 
                    />
                  </div>

                  {/* 右侧内容 */}
                  <div className="story-card-content">
                    <h3 className="story-card-title">
                      科学少年成长记: 拥有杨利伟签名的小孩儿哥如何玩转科学实验
                    </h3>
                    <p className="story-card-description">
                      从火箭模型到太空探索,这个13岁的小科学家用实验证明梦想的力量...
                    </p>
                    <div className="story-card-link">
                      <span>
                        去了解 ›
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      ) : currentPage === 'books' ? (
        // 显示Book页面内容
        <div style={{ padding: '20px', minHeight: '60vh' }}>
          {/* 页面标题 */}
          <div style={{ textAlign: 'center', marginBottom: '40px' }}>
            <h1 style={{ fontSize: '2.5rem', marginBottom: '10px', color: '#333' }}>智能图书</h1>
            <p style={{ fontSize: '1.1rem', color: '#666' }}>为孩子的成长提供优质的图书资源</p>
          </div>

          {/* 图书分类 */}
          <div style={{ 
            display: 'flex', 
            justifyContent: 'center', 
            gap: '15px', 
            marginBottom: '40px',
            flexWrap: 'wrap'
          }}>
            {categories.map(category => (
              <button
                key={category.id}
                style={{
                  padding: '10px 20px',
                  border: '1px solid #ddd',
                  borderRadius: '25px',
                  background: activeCategory === category.id ? '#667eea' : 'white',
                  color: activeCategory === category.id ? 'white' : '#333',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease',
                  fontSize: '14px'
                }}
                onClick={() => setActiveCategory(category.id)}
              >
                {category.name}
              </button>
            ))}
          </div>

          {/* 图书网格 */}
          <div style={{ 
            display: 'grid', 
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
            gap: '30px',
            maxWidth: '1200px',
            margin: '0 auto'
          }}>
            {filteredBooks.map(book => (
              <div key={book.id} style={{
                border: '1px solid #eee',
                borderRadius: '12px',
                padding: '20px',
                background: 'white',
                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                position: 'relative',
                transition: 'transform 0.3s ease',
                cursor: 'pointer'
              }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-5px)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
              >
                {book.tag && (
                  <span style={{
                    position: 'absolute',
                    top: '15px',
                    right: '15px',
                    background: '#e74c3c',
                    color: 'white',
                    padding: '4px 8px',
                    borderRadius: '4px',
                    fontSize: '12px',
                    fontWeight: 'bold'
                  }}>
                    {book.tag}
                  </span>
                )}
                
                <div style={{ textAlign: 'center', marginBottom: '15px' }}>
                  <img 
                    src={book.image} 
                    alt={book.title} 
                    style={{
                      width: '120px',
                      height: '160px',
                      objectFit: 'cover',
                      borderRadius: '8px',
                      boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                    }}
                  />
                </div>
                
                <div>
                  <h3 style={{ 
                    fontSize: '1.2rem', 
                    marginBottom: '8px', 
                    color: '#333',
                    fontWeight: 'bold'
                  }}>
                    {book.title}
                  </h3>
                  
                  <p style={{ 
                    fontSize: '0.9rem', 
                    color: '#666', 
                    marginBottom: '12px',
                    lineHeight: '1.4'
                  }}>
                    {book.description}
                  </p>
                  
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center',
                    marginBottom: '10px',
                    fontSize: '0.8rem',
                    color: '#888'
                  }}>
                    <span>{book.author}</span>
                    <span>{book.publisher}</span>
                  </div>
                  
                  <div style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    gap: '10px',
                    marginBottom: '15px'
                  }}>
                    <span style={{ color: '#f39c12' }}>
                      {'★'.repeat(Math.floor(book.rating))}
                      {'☆'.repeat(5 - Math.floor(book.rating))}
                    </span>
                    <span style={{ fontWeight: 'bold' }}>{book.rating}</span>
                    <span style={{ color: '#666' }}>{book.sales}</span>
                  </div>
                  
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center'
                  }}>
                    <div>
                      <span style={{ 
                        fontSize: '1.2rem', 
                        fontWeight: 'bold', 
                        color: '#e74c3c' 
                      }}>
                        {book.price}
                      </span>
                      {book.originalPrice && (
                        <span style={{ 
                          fontSize: '0.9rem', 
                          color: '#999', 
                          textDecoration: 'line-through',
                          marginLeft: '8px'
                        }}>
                          {book.originalPrice}
                        </span>
                      )}
                    </div>
                    <button style={{
                      background: '#667eea',
                      color: 'white',
                      border: 'none',
                      padding: '8px 16px',
                      borderRadius: '6px',
                      cursor: 'pointer',
                      fontSize: '14px',
                      fontWeight: 'bold',
                      transition: 'background 0.3s ease'
                    }}
                    onMouseEnter={(e) => e.target.style.background = '#5a6fd8'}
                    onMouseLeave={(e) => e.target.style.background = '#667eea'}
                    >
                      立即购买
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : currentPage === 'courses' ? (
        // 显示Coursess页面内容
        <div style={{ padding: '20px', minHeight: '60vh' }}>
          {/* 页面标题 */}
          <div style={{ textAlign: 'center', marginBottom: '40px' }}>
            <h1 style={{ fontSize: '2.5rem', marginBottom: '10px', color: '#333' }}>培优素养课</h1>
            <p style={{ fontSize: '1.1rem', color: '#666' }}>为孩子的全面发展提供优质课程</p>
          </div>

          {/* 课程分类 */}
          <div style={{ 
            display: 'flex', 
            justifyContent: 'center', 
            gap: '15px', 
            marginBottom: '40px',
            flexWrap: 'wrap'
          }}>
            {courseCategories.map(category => (
              <button
                key={category.id}
                style={{
                  padding: '10px 20px',
                  border: '1px solid #ddd',
                  borderRadius: '25px',
                  background: activeCourseCategory === category.id ? '#667eea' : 'white',
                  color: activeCourseCategory === category.id ? 'white' : '#333',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease',
                  fontSize: '14px'
                }}
                onClick={() => setActiveCourseCategory(category.id)}
              >
                {category.name}
              </button>
            ))}
          </div>

          {/* 加载状态 */}
          {loading && (
            <div style={{ textAlign: 'center', padding: '40px' }}>
              <div style={{
                width: '40px',
                height: '40px',
                border: '4px solid #f3f3f3',
                borderTop: '4px solid #667eea',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite',
                margin: '0 auto 20px'
              }}></div>
              <p>正在加载课程...</p>
            </div>
          )}

          {/* 错误状态 */}
          {error && (
            <div style={{ textAlign: 'center', padding: '40px' }}>
              <p style={{ color: '#e74c3c', marginBottom: '10px' }}>{error}</p>
              {error.includes('后端服务未运行') ? (
                <p style={{ color: '#666', fontSize: '14px' }}>
                  提示：请启动后端服务以显示真实课程数据
                </p>
              ) : (
                <button
                  style={{
                    background: '#667eea',
                    color: 'white',
                    border: 'none',
                    padding: '10px 20px',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    fontSize: '14px'
                  }}
                  onClick={() => window.location.reload()}
                >
                  重新加载
                </button>
              )}
            </div>
          )}

          {/* 课程网格 */}
          {!loading && !error && (
            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))', 
              gap: '30px',
              maxWidth: '1200px',
              margin: '0 auto'
            }}>
              {filteredCourses.length > 0 ? (
                filteredCourses.map(course => (
                  <div
                    key={course.id}
                    style={{
                      border: '1px solid #eee',
                      borderRadius: '12px',
                      padding: '20px',
                      background: 'white',
                      boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                      position: 'relative',
                      transition: 'transform 0.3s ease',
                      cursor: 'pointer'
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-5px)'}
                    onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
                    onClick={() => navigate(`/course-detail/${course.id}`)}
                  >
                    {course.tag && (
                      <span style={{
                        position: 'absolute',
                        top: '15px',
                        right: '15px',
                        background: '#e74c3c',
                        color: 'white',
                        padding: '4px 8px',
                        borderRadius: '4px',
                        fontSize: '12px',
                        fontWeight: 'bold'
                      }}>
                        {course.tag}
                      </span>
                    )}
                    
                    <div style={{ textAlign: 'center', marginBottom: '20px' }}>
                      <img 
                        src={course.image} 
                        alt={course.title} 
                        style={{
                          width: '100%',
                          height: '200px',
                          objectFit: 'cover',
                          borderRadius: '8px',
                          boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
                        }}
                        onError={(e) => {
                          e.target.src = '/image/1.webp';
                          console.log(`图片加载失败: ${course.image}`);
                        }}
                      />
                    </div>
                    
                    <div>
                      <h3 style={{ 
                        fontSize: '1.3rem', 
                        marginBottom: '10px', 
                        color: '#333',
                        fontWeight: 'bold'
                      }}>
                        {course.title}
                      </h3>
                      
                      <p style={{ 
                        fontSize: '0.9rem', 
                        color: '#666', 
                        marginBottom: '15px',
                        lineHeight: '1.5'
                      }}>
                        {course.description}
                      </p>
                      
                      <div style={{ 
                        display: 'flex', 
                        justifyContent: 'space-between', 
                        alignItems: 'center',
                        marginBottom: '15px',
                        fontSize: '0.8rem',
                        color: '#888'
                      }}>
                        <span>{course.level}</span>
                        <span>{course.duration}</span>
                        <span>{course.students}人学习</span>
                      </div>
                      
                      <div style={{ 
                        display: 'flex', 
                        justifyContent: 'space-between', 
                        alignItems: 'center'
                      }}>
                        <span style={{ 
                          fontSize: '1.3rem', 
                          fontWeight: 'bold', 
                          color: '#e74c3c' 
                        }}>
                          {course.price}
                        </span>
                        <button
                          style={{
                            background: '#667eea',
                            color: 'white',
                            border: 'none',
                            padding: '8px 16px',
                            borderRadius: '6px',
                            cursor: 'pointer',
                            fontSize: '14px',
                            fontWeight: 'bold',
                            transition: 'background 0.3s ease'
                          }}
                          onMouseEnter={(e) => e.target.style.background = '#5a6fd8'}
                          onMouseLeave={(e) => e.target.style.background = '#667eea'}
                          onClick={(e) => {
                            e.stopPropagation();
                            navigate(`/course-detail/${course.id}`);
                          }}
                        >
                          立即报名
                        </button>
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div style={{ textAlign: 'center', gridColumn: '1 / -1', padding: '40px' }}>
                  <p>暂无课程数据</p>
                </div>
              )}
            </div>
          )}
        </div>
      ) : currentPage === 'xue' ? (
        // 显示Xue页面内容
        <div style={{
          minHeight: '60vh',
          backgroundColor: '#f5f5f5',
          padding: '20px',
          fontFamily: 'Arial, sans-serif'
        }}>
          {/* 主要内容区域 */}
          <div style={{
            maxWidth: '1200px',
            margin: '0 auto',
            backgroundColor: 'white',
            borderRadius: '12px',
            padding: '30px',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)'
          }}>
            {/* 产品展示区域 */}
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: '30px'
            }}>
              {/* 产品图片 */}
              <div style={{
                width: '100%',
                maxWidth: '600px',
                textAlign: 'center'
              }}>
                <img 
                  src="/image/6.png" 
                  alt="智绘师学习机" 
                  style={{
                    width: '120%',
                    height: 'auto',
                    borderRadius: '8px',
                    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
                    transform: 'scale(1.2)',
                    margin: '0 -10%'
                  }}
                />
              </div>

              {/* 产品信息 */}
              <div style={{
                textAlign: 'center',
                maxWidth: '500px',
                marginTop: '40px'
              }}>
                <h2 style={{
                  fontSize: '28px',
                  color: '#333',
                  marginBottom: '15px',
                  fontWeight: 'bold'
                }}>
                  智绘师智能学习机
                </h2>
                
                <p style={{
                  fontSize: '16px',
                  color: '#666',
                  lineHeight: '1.6',
                  marginBottom: '20px'
                }}>
                  专为儿童设计的学习设备，集成了丰富的教育资源，帮助孩子更好地学习和成长。
                  采用先进的AI技术，提供个性化的学习体验。
                </p>

                {/* 产品特点 */}
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                  gap: '20px',
                  marginTop: '30px'
                }}>
                  <div style={{
                    padding: '20px',
                    backgroundColor: '#f8f9fa',
                    borderRadius: '8px',
                    textAlign: 'center'
                  }}>
                    <div style={{
                      fontSize: '24px',
                      marginBottom: '10px'
                    }}>📚</div>
                    <h3 style={{
                      fontSize: '18px',
                      marginBottom: '8px',
                      color: '#333'
                    }}>丰富资源</h3>
                    <p style={{
                      fontSize: '14px',
                      color: '#666'
                    }}>海量学习内容，覆盖各学科</p>
                  </div>

                  <div style={{
                    padding: '20px',
                    backgroundColor: '#f8f9fa',
                    borderRadius: '8px',
                    textAlign: 'center'
                  }}>
                    <div style={{
                      fontSize: '24px',
                      marginBottom: '10px'
                    }}>🤖</div>
                    <h3 style={{
                      fontSize: '18px',
                      marginBottom: '8px',
                      color: '#333'
                    }}>AI智能</h3>
                    <p style={{
                      fontSize: '14px',
                      color: '#666'
                    }}>智能推荐，个性化学习</p>
                  </div>

                  <div style={{
                    padding: '20px',
                    backgroundColor: '#f8f9fa',
                    borderRadius: '8px',
                    textAlign: 'center'
                  }}>
                    <div style={{
                      fontSize: '24px',
                      marginBottom: '10px'
                    }}>👀</div>
                    <h3 style={{
                      fontSize: '18px',
                      marginBottom: '8px',
                      color: '#333'
                    }}>护眼设计</h3>
                    <p style={{
                      fontSize: '14px',
                      color: '#666'
                    }}>专业护眼，健康学习</p>
                  </div>
                </div>

                {/* 购买按钮 */}
                <div style={{
                  marginTop: '40px',
                  display: 'flex',
                  justifyContent: 'center',
                  gap: '20px',
                  flexWrap: 'wrap'
                }}>
                  <button style={{
                    padding: '12px 30px',
                    fontSize: '16px',
                    backgroundColor: '#1890ff',
                    color: 'white',
                    border: 'none',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    fontWeight: 'bold',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseOver={(e) => {
                    e.target.style.backgroundColor = '#40a9ff';
                    e.target.style.transform = 'translateY(-2px)';
                  }}
                  onMouseOut={(e) => {
                    e.target.style.backgroundColor = '#1890ff';
                    e.target.style.transform = 'translateY(0)';
                  }}
                  >
                    立即购买
                  </button>
                  
                  <button style={{
                    padding: '12px 30px',
                    fontSize: '16px',
                    backgroundColor: 'white',
                    color: '#1890ff',
                    border: '2px solid #1890ff',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    fontWeight: 'bold',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseOver={(e) => {
                    e.target.style.backgroundColor = '#f0f8ff';
                    e.target.style.transform = 'translateY(-2px)';
                  }}
                  onMouseOut={(e) => {
                    e.target.style.backgroundColor = 'white';
                    e.target.style.transform = 'translateY(0)';
                  }}
                  >
                    了解更多
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : currentPage === 'wx' ? (
        // 显示Wx页面内容
        <div style={{
          width: '100vw',
          height: '100vh',
          margin: 0,
          padding: 0,
          backgroundImage: 'url(/image/8.png)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          display: 'flex',
          fontFamily: 'Arial, sans-serif',
          position: 'relative'
        }}>

          {/* 左侧文字内容区域 */}
          <div style={{
            width: '60%',
            height: '100%',
            padding: '60px 40px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            position: 'relative',
            zIndex: 2
          }}>
            {/* 红色竖条 */}
            <div style={{
              position: 'absolute',
              left: '40px',
              top: '60px',
              width: '6px',
              height: '60px',
              backgroundColor: '#e74c3c'
            }}></div>
            
            {/* 主标题 */}
            <h1 style={{
              fontSize: '2.8rem',
              fontWeight: 'bold',
              color: '#fff',
              margin: '0 0 40px 20px',
              lineHeight: '1.2',
              textShadow: '2px 2px 4px rgba(0,0,0,0.8)'
            }}>
              培养孩子全面发展
            </h1>
            
            {/* 持续成长的学习者 */}
            <div style={{ marginBottom: '40px' }}>
              <h2 style={{
                fontSize: '1.4rem',
                color: '#fff',
                marginBottom: '20px',
                fontWeight: 'bold',
                textShadow: '2px 2px 4px rgba(0,0,0,0.8)'
              }}>
                持续成长的学习者
              </h2>
              <ul style={{
                listStyle: 'none',
                padding: 0,
                margin: 0
              }}>
                <li style={{
                  marginBottom: '15px',
                  fontSize: '1rem',
                  color: '#fff',
                  lineHeight: '1.6',
                  paddingLeft: '20px',
                  position: 'relative',
                  textShadow: '1px 1px 3px rgba(0,0,0,0.8)'
                }}>
                  <span style={{
                    position: 'absolute',
                    left: 0,
                    top: '8px',
                    width: '6px',
                    height: '6px',
                    backgroundColor: '#fff',
                    borderRadius: '50%'
                  }}></span>
                  深知学习的价值，享受求知的乐趣
                </li>
                <li style={{
                  marginBottom: '15px',
                  fontSize: '1rem',
                  color: '#fff',
                  lineHeight: '1.6',
                  paddingLeft: '20px',
                  position: 'relative',
                  textShadow: '1px 1px 3px rgba(0,0,0,0.8)'
                }}>
                  <span style={{
                    position: 'absolute',
                    left: 0,
                    top: '8px',
                    width: '6px',
                    height: '6px',
                    backgroundColor: '#fff',
                    borderRadius: '50%'
                  }}></span>
                  有良好的学习习惯，和适合自身的学习方法
                </li>
                <li style={{
                  marginBottom: '15px',
                  fontSize: '1rem',
                  color: '#fff',
                  lineHeight: '1.6',
                  paddingLeft: '20px',
                  position: 'relative',
                  textShadow: '1px 1px 3px rgba(0,0,0,0.8)'
                }}>
                  <span style={{
                    position: 'absolute',
                    left: 0,
                    top: '8px',
                    width: '6px',
                    height: '6px',
                    backgroundColor: '#fff',
                    borderRadius: '50%'
                  }}></span>
                  不断学习新事物新技术，适应社会的发展和变化
                </li>
              </ul>
            </div>
            
            {/* 部分人物头像 */}
            <div style={{
              position: 'absolute',
              left: '20px',
              bottom: '60px',
              width: '80px',
              height: '80px',
              borderRadius: '50%',
              background: 'linear-gradient(45deg, #ffd1d1, #ffe4e4)',
              opacity: 0.7,
              transform: 'translateX(-50%)'
            }}></div>
          </div>
          
          {/* 右侧插图区域 */}
          <div style={{
            width: '40%',
            height: '100%',
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 2
          }}>
            {/* 手部插图 */}
            <div style={{
              position: 'relative',
              width: '100%',
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-around',
              alignItems: 'center'
            }}>
             
              
              {/* 中间手部 - 向上张开 */}
              <div style={{
                position: 'relative',
                marginTop: '20px'
              }}>
                <div style={{
                  width: '140px',
                  height: '100px',
                  background: 'linear-gradient(45deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6))',
                  borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
                  transform: 'rotate(10deg)',
                  position: 'relative'
                }}></div>
                <div style={{
                  position: 'absolute',
                  bottom: '20px',
                  left: '50%',
                  transform: 'translateX(-50%)',
                  fontSize: '1.1rem',
                  fontWeight: 'bold',
                  color: '#fff',
                  whiteSpace: 'nowrap',
                  textShadow: '2px 2px 4px rgba(0,0,0,0.8)'
                }}>
                  独立判断的思考者
                </div>
              </div>
              
              {/* 下方手部 - 向上张开 */}
              <div style={{
                position: 'relative',
                marginBottom: '60px'
              }}>
                <div style={{
                  width: '120px',
                  height: '90px',
                  background: 'linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5))',
                  borderRadius: '50% 50% 50% 50% / 60% 60% 40% 40%',
                  transform: 'rotate(-5deg)',
                  position: 'relative'
                }}></div>
                <div style={{
                  position: 'absolute',
                  bottom: '20px',
                  left: '50%',
                  transform: 'translateX(-50%)',
                  fontSize: '1.1rem',
                  fontWeight: 'bold',
                  color: '#fff',
                  whiteSpace: 'nowrap',
                  textShadow: '2px 2px 4px rgba(0,0,0,0.8)'
                }}>
                  美好生活的创造者
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        // 显示原有的Home页面内容
        <>
      {/* Video Banner Section */}
      <section className={styles['video-banner-section']}>
        <div className={styles['video-container']}>
          <video
            id="video"
            loop
            autoPlay
            preload="metadata"
            muted
            playsInline
            className={styles['banner-video']}
            onLoadedData={handleVideoLoad}
            onError={handleVideoError}
            onCanPlay={() => console.log("Video can play")}
            onPlay={() => console.log("Video started playing")}
          >
            <source src="/image/sp111.mp4" type="video/mp4" />
          </video>
        </div>
      </section>

      {/* Product Showcase Section */}
      <section className={styles['product-showcase']}>
        <div className={styles['product-container']}>
          <button
            className={`${styles['product-arrow']} ${styles['left']}`}
            onClick={prevProduct}
            style={{ display: currentProductIndex === 0 ? "none" : "flex" }}
          >
            &lt;
          </button>

          {/* 修改product-cards部分 */}
          <div className={styles['product-cards']}>
            {isMobile ? (
              // 手机端只显示当前选中的产品
              <div
                className={`${styles['product-card']} ${styles['active']}`}
              >
                <div className={styles['product-image']}>
                  <img src={products[currentProductIndex].image} alt={products[currentProductIndex].alt} />
                </div>
                <div className={styles['product-info']}>
                  <h3 className={styles['product-title']}>{products[currentProductIndex].title}</h3>
                  <p className={styles['product-description']}>{products[currentProductIndex].description}</p>
                  <p className={styles['product-price']}>{products[currentProductIndex].price}</p>
                </div>
              </div>
            ) : (
              // 桌面端和平板端显示多个产品
              products
                .slice(
                  Math.floor(currentProductIndex / 3) * 3,
                  Math.floor(currentProductIndex / 3) * 3 + 3
                )
                .map((product, index) => (
                  <div
                    key={product.id}
                    className={`${styles['product-card']} ${index === currentProductIndex % 3 ? styles['active'] : ''
                      }`}
                  >
                    <div className={styles['product-image']}>
                      <img src={product.image} alt={product.alt} />
                    </div>
                    <div className={styles['product-info']}>
                      <h3 className={styles['product-title']}>{product.title}</h3>
                      <p className={styles['product-description']}>{product.description}</p>
                      <p className={styles['product-price']}>{product.price}</p>
                    </div>
                  </div>
                ))
            )}
          </div>

          <button
            className={`${styles['product-arrow']} ${styles['right']}`}
            onClick={nextProduct}
            style={{ display: currentProductIndex >= products.length - 1 ? 'none' : 'flex' }}
          >
            &gt;
          </button>
        </div>
      </section>

      {/* 精品课展示区域 */}
      <section className={styles['premium-courses']}>
        <div className={styles['section-header']}>
          <h2 className={styles['section-title']}>精品课臻选</h2>
          <a onClick={() => navigate('/coursess')} className={styles['view-all']}>查看全部 &gt;</a>
        </div>

        <div className={styles['courses-container']}>
          {premiumCourses.map(course => (
            <div className={styles['course-card']} key={course.id}>
              {course.tag && <span className={styles['course-tag']}>{course.tag}</span>}
              <div className={styles['course-image']}>
                <img src={course.image} alt={course.title} />
              </div>
              <div className={styles['course-info']}>
                <h3 className={styles['course-title']}>{course.title}</h3>
                <p className={styles['course-description']}>{course.description}</p>
                <div className={styles['course-footer']}>
                  <span className={styles['course-price']}>{course.price}</span>
                  <button className={styles['enroll-btn']}>立即报名</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Main Content Area */}
      <main className={styles['main-content']} style={{
        paddingBottom: isMobile ? '80px' : '40px'
      }}>
        <div className={styles['content-wrapper']}>
          <h1>欢迎来到智绘师教育</h1>
          <p>为孩子的未来提供优质的教育资源</p>
          {/* 这里可以添加更多内容 */}
        </div>
      </main>
        </>
      )}

      {/* 移动端底部导航栏 */}
      {isMobile && (
        <div className={styles['tab-bar']}>
          {tabItems.map((item) => (
            <div
              key={item.path}
              className={`${styles['tab-item']} ${activeTab === item.path ? styles['active'] : ''}`}
              onClick={() => {
                setActiveTab(item.path);
                navigate(item.path);
              }}
            >
              <span className={styles['tab-icon']}>{item.icon}</span>
              <span className={styles['tab-label']}>{item.label}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
